<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>综合服务系统--考试列表首页</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/supplier/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--extended-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
    <link rel="stylesheet" href="/plugin/it/common/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <!--公用样式JS-->
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/zTree/js/jquery.ztree.all.js" charset="utf-8"></script>
</head>
<style>
    .Right {
        width: 100%;
        overflow-y: auto;
    }

    .tab-name-select {
        font-weight: bolder;
        font-size: 18px !important;
        color: #1e9fff !important;
        background-color: #ffffff !important;
    }

    .layui-tab-brief > .layui-tab-more li.layui-this:after, .layui-tab-brief > .layui-tab-title .layui-this:after {
        border-bottom: 2px solid #1e9fff !important;
    }

    .layui-laypage-limits select {
        width: 70px;
    }

    .layui-table-grid-down {
        display: none;
    }

    .layui-table tbody tr:hover, .layui-table-hover, .layui-table-click {
        background-color: rgba(255, 255, 255, 0);
    }

    .layui-col-md1 {
        width: 50%;
    }

    .layui-table-cell {
        text-align: center;
        height: no;
        white-space: normal;
    }

    .tab-name-unselect {
        font-weight: bolder;
        font-size: 18px !important;
        color: #888888;
    }

    .tab-name-select {
        font-weight: bolder;
        font-size: 18px !important;
        color: #1e9fff !important;
        background-color: #ffffff !important;
    }

    .layui-table tbody tr:hover, .layui-table-hover, .layui-table-click {
        background-color: rgba(255, 255, 255, 0);
    }

    .layui-tab-brief > .layui-tab-more li.layui-this:after, .layui-tab-brief > .layui-tab-title .layui-this:after {
        border-bottom: 2px solid #1e9fff !important;
    }

    .layui-laypage-limits select {
        width: 70px;
    }

    .btn_list input {
        height: 34px;
        line-height: 34px;
        padding: 0 18px;
        color: #FFFFFF;
        background: #3e7ce7;
        font-size: 14px;
        border-radius: 2px;
        border: none;
        text-align: center;
    }

    .layui-table th {
        background: #5775EF;
        color: #FFF;
    }

    .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background: #5775EF;
    }

    .layui-breadcrumb a:hover {
        color: #5775EF !important;
    }
</style>

<body>
<!--头部-->
<div style="background-color: #F1F4FB;padding-left: 20px;">
    <span class="layui-breadcrumb" lay-separator=">">
        <a><cite>考试管理</cite></a>
        <a href="#"><cite>考试列表</cite></a>
    </span>
</div>
<!--容器-->
<div class="layui-container"
     style="background-color: #ffffff;width:96%;margin-top: 0;padding:16px;border-radius: 10px">
    <div class="layui-tab layui-tab-brief" lay-filter="demo">
        <ul id="tab-uls" class="layui-tab-title" style="margin: 0 10px 10px 10px;width: auto;height: auto">
            <li class="layui-this tab-name-select" value="1">考试列表</li>
            <li class="tab-name-unselect" value="2">日志留痕</li>
        </ul>
        <div class="layui-tab-content" style="height: 60px;">
            <div class="layui-tab-item layui-show" style="margin-left: 0">
                <!--筛选行-->
                <div style="background-color: #F1F4FB;border-radius: 5px;padding:14px 10px;">
                    <div class="layui-row">
                        <!--姓名-->
                        <div class="" style="width: 15%;float: left;">
                            <input type="text" class="widinput"
                                   style="border: 1px solid #DDDDDD;width: 100%;height: 34px;box-sizing: border-box;"
                                   name="examName" id="examName" autocomplete="off" placeholder="请输入关键字搜索">
                        </div>
                        <div class="" style="padding-left:1%;width: 15%;float: left;">
                            <select name="type" class="ml8 fl" id="type" style="width: 100%;"
                                    lay-ignore>
                                <option value="">选择考试模式</option>
                                <#list ksms as vo>
                                    <option value="${vo.badtCode}"
                                    >${vo.badtName}</option>
                                </#list>
                            </select>
                        </div>
                        <!--时间-->
                        <div class="" style="padding-left:0.5%;width: 15%;float: left;">
                            <select name="status" class="ml8 fl" id="status" style="width: 100%;"
                                    lay-ignore>
                                <option value="">选择状态</option>
                                <option value="001">已保存</option>
                                <option value="002">已提交</option>
                                <option value="003">已结束</option>
                            </select>
                        </div>
                        <div class="btn_list" style="float: right;width: 53%">
                            <input class="fl" type="button" value="搜索" onclick="query()">
                            <input class="fr" type="button" style="margin-left: 10px;" value="添加考试" onclick="add()">
                            <input class="fr" type="button"
                                   style="margin-left: 10px;background-color: #FFFFFF;color: #3e7ce7;border: 1px solid #3e7ce7;"
                                   value="批量删除"
                                   onclick="dels()">
                            <input class="fr" type="button"
                                   style="margin-left: 10px;background-color: #FFFFFF;color: #3e7ce7;border: 1px solid #3e7ce7;"
                                   value="批量提交"
                                   onclick="submit()">
                            <input class="fr" type="button"
                                   style="margin-left: 10px;background-color: #FFFFFF;color: #3e7ce7;border: 1px solid #3e7ce7;"
                                   value="回收站" onclick="hsz()">
                            <input class="fr" type="button"
                                   style="margin-left: 10px;background-color: #FFFFFF;color: #3e7ce7;border: 1px solid #3e7ce7;"
                                   value="导出"
                                   onclick="derive()">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item" style="margin-left: 0"></div>
        </div>
    </div>
</div>
<div class="layui-container"
     style="background-color: #ffffff;width:96%;margin-top:30px;padding:16px;border-radius: 10px">
    <div class="layui-row">
        <table id="tableList" class="layui-hide" lay-filter="tableList"></table>
    </div>
</div>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<script type="text/html" id="toolBarRow">
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit" style="margin-left: 0;">编辑</a>
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="del" style="margin-left: 0;">删除</a>
    {{# if(d.markNum != d.actualNum ){ }}
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="grade" style="margin-left: 0;">待评分({{d.toScore}})</a>
    {{# }else { }}
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="grade" style="margin-left: 0;">待评分(0)</a>
    {{#  } }}
</script>
<script type="text/html" id="imgtmp">
    <img src="{{d.url}}" style="width: 100%;height: 100%" onclick="showImg(this)" alt=""/>
</script>
<script type="text/javascript">
    var layer;
    var form = layui.form;
    var table = null;
    var tableIns = null;
    var defaultTabInd = 0;
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    var element;
    layui.use(['element', 'laydate', 'layer', 'table'], function () {
        element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#beginDate' //指定元素
        });
        laydate.render({
            elem: '#endDate' //指定元素
        });
        getTableByIndex(0)
        element.on('tab(demo)', function (data) {
            if (defaultTabInd == data.index) {
            } else {
                defaultTabInd = data.index;
                $('#tab-uls li').addClass("tab-name-unselect");
                $('#tab-uls li').removeClass("tab-name-select");
                $('#tab-uls li:eq(' + data.index + ')').removeClass("tab-name-unselect");
                $('#tab-uls li:eq(' + data.index + ')').addClass("tab-name-select");
                getTableByIndex(data.index);
            }
        });

    });

    function getTableByIndex(index) {
        //根据条件加载表格:
        if (index == 0) {
            //考试列表
            examList();
        } else if (index == 1) {
            //日志留痕
            loginList();
        }
    }

    function examList() {
        layui.use('table', function () {
            table = layui.table;
            element = element;
            //方法级渲染
            tableIns = table.render({
                id: 'tableList',
                elem: '#tableList',
                url: '/exam/list/selectExam',
                height: 'auto',
                page: true,
                cols: [[
                    {type: 'checkbox'},
                    {
                        title: '序号', width: '5%', templet: function (res) {
                            return res.LAY_INDEX;
                        }
                    },
                    {field: 'examId', title: 'ID', hide: true, sort: false},
                    {field: 'url', title: '考试封面', width: '20%', templet: function (d) {
                        var imageurl="";
                        if(!d.url){
                            imageurl= '/plugin/common/images/fm.png';
                        }else{
                            imageurl=d.url;
                        }
                            return '<img src='+imageurl+' style="width: 100%;height: 100%" onclick="showImg(this)" alt=""/>';
                        }
                    },
                    {field: 'examName', title: '考试名称', width: '20%', sort: false},
                    {field: 'type', title: '考试模式', width: '15%', sort: false},
                    {field: 'expectNum', title: '拟参加人数', width: '10%', sort: false},
                    {field: 'actualNum', title: '已参加人数', width: '10%', sort: false},
                    {field: 'markNum', title: '已评分人数', width: '10%', sort: false},
                    {field: 'jgNum', title: '及格人数', width: '10%', sort: false},
                    {field: 'totalScore', title: '总分', width: '10%', sort: false},
                    {field: 'passScore', title: '及格分', width: '10%', sort: false},
                    {field: 'startTime', title: '考试开始时间', width: '15%', sort: false},
                    {field: 'endTime', title: '考试结束时间', width: '15%', sort: false},
                    {
                        field: 'status', title: '状态', width: '10%', templet: function (d) {
                            if (d.status == "000") {
                                return '<span >已删除 </span>'
                            }
                            if (d.status == "001") {
                                return '<span style="color: red">已保存</span>'
                            }
                            if (d.status == "002") {
                                return '<span style="color: green">已提交</span>'
                            }
                            if (d.status == "003") {
                                return '<span style="">已结束</span>'
                            }
                        }
                    },
                    {field: 'remark', title: '操作', width: '20%',fixed:'right', toolbar: "#toolBarRow"},
                ]],
                done: function (res, currentCount) {
                    //***重点***：table渲染完成后渲染element进度条
                    element.render();
                    $(".layui-table-page select").css("width", "80px");

                }
            });
            //监听工具条
            table.on('tool(tableList)', function (obj) {
                let data = obj.data;
                if (obj.event === 'edit') {
                    edit(data.examId);
                }
                if (obj.event === 'del') {
                    del(data);
                }
                if (obj.event === 'grade') {
                    // if (data.type === "模拟练习") {
                    //     layer.msg("模拟考试无需评分", {icon: 2})
                    //     return false;
                    // }
                    grade(data.examId);
                }
            });
        });
    }

    function loginList() {
        layui.use('table', function () {
            table = layui.table;
            element = element;
            //方法级渲染
            tableIns = table.render({
                id: 'tableList',
                elem: '#tableList',
                autoSort: false,
                url: '/give/mark/selectExamTimeList?state=' + "000",
                height: "full-230",
                page: true,
                cols: [[
                    {
                        title: '序号', width: '10%', templet: function (res) {
                            return res.LAY_INDEX;
                        }
                    },
                    {field: 'examId', title: 'ID', hide: true, sort: false},
                    {field: 'userName', title: '人员姓名', width: '20%', sort: true},
                    {field: 'startTime', title: '答卷开始时间', width: '35%', sort: true},
                    {field: 'submitTime', title: '答卷结束时间', width: '35%', sort: true}
                ]],
                done: function (res, currentCount) {
                    //***重点***：table渲染完成后渲染element进度条
                    element.render();
                    $(".layui-table-page select").css("width", "80px");

                }
            });
            //监听工具条
            table.on('tool(tableList)', function (obj) {

            });
            // 监听排序 解决 项目进度排序后不显示的问题
            table.on('sort(tableList)', function (obj) {
                //遍历设置目前的宽度：
                // saveTableWidth();
                table.reload('tableList', {
                    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        field: obj.field,//排序字段
                        order: obj.type//排序方式
                    },
                    // cols: tableCols
                });
            });
        });
    }


    //筛选
    function query() {
        let examName = $('#examName').val();
        let status = $('#status').val();
        let type = $('#type').val();
        let jsondata = {
            examName: examName,
            status: status,
            type: type,
        };
        table.reload('tableList', {where: jsondata});
    }


    //删除（改状态  已提交不可删除）
    function del(data) {
        layer.confirm('删除,可在回收站中进行还原。', {btn: ['确定', '取消']}, function () {
            if (data.status == '002') {
                layer.msg("已提交不可删除", {icon: 2});
                return;
            }
            data.status = '000'
            /*处理type=模拟练习【002】 & type=正式考试【001】*/
            if ('模拟练习' == data.type){
                data.type = '002'
            }
            if ('正式考试' == data.type){
                data.type = '001'
            }
            layerAjax("/exam/list/updateExam", data, '', function (d) {
                if (d) {
                    layer.msg("操作成功", {icon: 1});
                    tableIns.reload();
                } else {
                    layer.msg("操作失败", {icon: 2});
                }
            })
        });
    }

    //评分
    function grade(data) {
        window.parent._showtab(data, '评分页面', '/give/mark/giveMark?examId=' + data);
    }

    //编辑
    function edit(data) {
        window.parent._showtab(data, '编辑考试', '/exam/list/examUpdate?examId=' + data);
    }

    //批量删除（改状态  已提交不可删除）
    function dels() {
        let checkStatus = table.checkStatus('tableList');
        var data = checkStatus.data;
        if (data.length == 0) {
            layer.msg("至少选择一个删除", {icon: 2});
            return false;
        }
        layer.confirm('删除,可在回收站中进行还原。', {btn: ['确定', '取消']}, function () {
            let ids = [];
            for (let i = 0; i < data.length; i++) {
                if (data[i].status == '002') {
                    layer.msg("已提交不可删除,请重新选", {icon: 2});
                    return;
                }
                ids.push(data[i].examId);
            }
            layerAjaxGet("/exam/list/updateExams", {ids: ids, status: '000'}, '', function (d) {
                if (d) {
                    layer.msg("删除成功 本次删除成功" + data.length + "条", {icon: 1});
                    tableIns.reload();
                } else {
                    layer.msg("删除失败", {icon: 2});
                }
            })
        });

    }

    //批量提交
    function submit() {
        let checkStatus = table.checkStatus('tableList');
        var data = checkStatus.data;
        if (data.length == 0) {
            layer.msg("至少选择一个提交", {icon: 2});
            return false;
        }
        layer.confirm('确定提交吗?', {btn: ['确定', '取消']}, function () {
            let ids = [];
            for (let i = 0; i < data.length; i++) {
                if (data[i].status == '001') {
                    ids.push(data[i].examId);
                } else {
                    layer.msg("选中有已提交的数据,请重新选", {icon: 2});
                    return;
                }
            }
            layerAjaxGet("/exam/list/updateExams", {ids: ids, status: '002'}, '', function (d) {
                if (d.flag) {
                    layer.msg("提交成功 本次提交成功" + data.length + "条", {icon: 1});
                    tableIns.reload();
                } else {
                    layer.msg(d.msg, {icon: 2});
                }
            })
        });
    }

    //导出
    function derive() {
        let datas = table.checkStatus('tableList').data;
        if (datas.length == 0) {
            layer.msg("至少选择一个导出", {icon: 2});
            return false;
        }
        let ids = [];
        for (let i = 0; i < datas.length; i++) {
            ids.push(datas[i].examId);
        }
        location.href = '/exam/list/exportKs?ids=' + ids;
    }

    //新增页面跳转
    function add() {
        layerAjaxGet('/exam/list/examId', '', '', function (d) {
            if (d.flag) {
                window.parent._showtab('cf8c85d368123412323a4104ef32197c', '添加考试', '/exam/list/examadd?examId=' + d.data);
            } else {
                layer.msg("操作失败", {icon: 2})
            }
        })

    }

    //回收站
    function hsz() {
        window.parent._showtab('cf8c85d368595158104ef32197c', '回收站', '/exam/list/recycleBin');
    }

</script>
</body>

</html>
